﻿
@{
    ViewBag.Title = "TemplateIndex";
    Layout = "~/Views/Shared/_MyLayout.cshtml";
}

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>工程流程模板</legend>
</fieldset>
<form class="layui-form" enctype="multipart/form-data">
    <div class="layui-form-item">
        <label class="layui-form-label">搜索</label>
        <div class="layui-input-block">
            <input type="text" id="SearchText" name="Title1" required lay-verify="required" onkeypress="getKey()" placeholder="输入模板名" class="layui-input" style="width:300px;float:left;">
            <input type="text" value="" style="display:none" />
            <button type="button" class="layui-btn layui-btn-normal" style="float:left;" onclick="SearchFunc()"><i class="layui-icon">&#xe615;</i></button>
            <button type="button" class="layui-btn layui-btn-danger" style="float:left;" id="BtnAdd"><i class="layui-icon">&#xe61f;</i>新增</button>

            @*<button type="button" class="layui-btn layui-btn-normal" onclick="apply()"><i class="layui-icon">&#xe63b;</i></button>*@
        </div>
    </div>
</form>
<table id="demo" lay-filter="ProjectTableList"></table>

<div id="AddLayer" style="display:none;">
    <form class="layui-form" id="AddFrom" style="margin-top:10px;">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>新增模板信息</legend>
        </fieldset>
        <div class="layui-form-item">
            
            <div class="layui-inline">
                <label class="layui-form-label">模板名</label>
                <div class="layui-input-inline" style="width:200px;">
                    <input type="text" name="TempName" value="" placeholder="必填" required lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">节点名</label>
                <div class="layui-input-inline" style="width:200px;">
                    <input type="text" name="NodeName" value="" placeholder="必填" required lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">序号</label>
                <div class="layui-input-inline" style="width:100px;">
                    <input type="number" name="NodeNum" value="" placeholder="必填" required lay-verify="required" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">工作内容</label>
            <div class="layui-input-block" style="width:800px;">
                <textarea name="Content" placeholder="请输入工作内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门选择</label>
            <div class="layui-input-inline">
                <select name="Department" lay-verify="required" required lay-filter="BidStateSelFilter">
                    <option value=""></option>
                    <option value="工程部" selected>工程部</option>
                    <option value="业务部">业务部</option>
                    <option value="行政部">行政部</option>
                    <option value="技经部">技经部</option>
                    <option value="市场部">市场部</option>
                    <option value="财务部">财务部</option>
                </select>
            </div>
            <label class="layui-form-label">项目阶段</label>
            <div class="layui-input-inline" style="width:120px;">
                <select name="ProStage" required lay-verify="required" >
                    <option value="1">项目前期</option>
                    <option value="2">前期测算</option>
                    <option value="3">项目实施</option>
                    <option value="4">竣工结算</option>
                    <option value="5">决算收款</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"></label>
            </div>
            <button type="button" class="layui-btn" id="BtnAddFromSave">保存</button>
        </div>
        <button type="submit" id="mysubmit" class="layui-btn" lay-submit lay-filter="formVerify" style="display:none;">立即提交</button>
    </form>
</div>

<div id="EditLayer" style="display:none;">
    <form class="layui-form" id="EditFrom" style="margin-top:10px;">
        <input type="text" name="ProcTemplateId" value="" style="display:none">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>编辑模板信息</legend>
        </fieldset>
        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">模板名</label>
                <div class="layui-input-inline" style="width:200px;">
                    <input type="text" name="TempName" value="" placeholder="必填" required lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">节点名</label>
                <div class="layui-input-inline" style="width:200px;">
                    <input type="text" name="NodeName" value="" placeholder="必填" required lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">序号</label>
                <div class="layui-input-inline" style="width:100px;">
                    <input type="number" name="NodeNum" value="" placeholder="必填" required lay-verify="required" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">工作内容</label>
            <div class="layui-input-block" style="width:800px;">
                <textarea name="Content" placeholder="请输入工作内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门选择</label>
            <div class="layui-input-inline">
                <select name="Department" id="EditSelDepartment" lay-verify="required" required lay-filter="BidStateSelFilter">
                    <option value=""></option>
                    <option value="工程部">工程部</option>
                    <option value="业务部">业务部</option>
                    <option value="行政部">行政部</option>
                    <option value="技经部">技经部</option>
                    <option value="市场部">市场部</option>
                    <option value="财务部">财务部</option>
                </select>
            </div>
            <label class="layui-form-label">项目阶段</label>
            <div class="layui-input-inline" style="width:120px;">
                <select name="ProStage" id="EditSelProStage" required lay-verify="required">
                    <option value="1">项目前期</option>
                    <option value="2">前期测算</option>
                    <option value="3">项目实施</option>
                    <option value="4">竣工结算</option>
                    <option value="5">决算收款</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"></label>
            </div>
            <button type="button" class="layui-btn" id="BtnEditFromSave">保存</button>
        </div>
        <button type="submit" id="myEditsubmit" class="layui-btn" lay-submit lay-filter="EditformVerify" style="display:none;">立即提交</button>
    </form>
</div>


<script>
    var table;
    layui.use(['element', 'layer', 'form', 'table',], function () {
        var element = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        table = layui.table;
        var layerindex;
        var IsValidate = 0;

        //拦截form提交消息
        form.on('submit(formVerify)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            IsValidate = 1;
            return false;
        });

        form.on('submit(EditformVerify)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            IsValidate = 1;
            return false;
        });

        $("#BtnAdd").on("click", function () {
            layerindex = layer.open({
                type: 1,
                title: ['新增', 'font-size:18px;'],
                area: ['1000px', '600px'],
                content: $("#AddLayer"),  //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                success: function (layero, index) {
                    //$("#AddFrom input[name='TestFeeId']").val("");
                    //$("#Type").find("option[value='" + TypeName + "']").attr("selected", true);
                    //form.render();
                }
            });
        });

        $("#BtnEditFromSave").on("click", function () {

            $("#myEditsubmit").click();
            if (IsValidate == 1) {
                IsValidate = 0;
            } else {
                return;
            }
            var obj = $("#EditFrom").serializeArray();
            var data = {};
            $.each(obj, function (i, v) {
                data[v.name] = v.value;
            });

            $.ajax({
                type: "POST",
                url: "/Process/TemplateEdit",
                async: false,
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(data),
                success: function (msg) {
                    if (msg.result == "OK") {
                        layer.msg('修改成功', { icon: 6, time: 1000 });
                        layer.close(layerindex);
                        table.reload("demo", {});
                    } else {
                        alert(msg.result);
                    }
                }
            });
           
        });

        $("#BtnAddFromSave").on("click", function () {

            $("#mysubmit").click();
            if (IsValidate == 1) {
                IsValidate = 0;
            } else {
                return;
            }
            var obj = $("#AddFrom").serializeArray();
            var data = {};
            $.each(obj, function (i, v) {
                data[v.name] = v.value;
            });

            $.ajax({
                type: "POST",
                url: "/Process/TemplateAdd",
                async: false,
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(data),
                success: function (msg) {
                    if (msg.result == "OK") {
                        layer.msg('添加成功', { icon: 6, time: 1000 });
                        layer.close(layerindex);
                        table.reload("demo", {});
                    } else {
                        alert(msg.result);
                    }
                }
            });

        });




        //第一个实例
        table.render({
            elem: '#demo'
            , method: 'post'
            //, height: 315
            , url: '/Process/ProcessTemplatTableRequest' //数据接口
            , page: true //开启分页
            , where: { SortName: "TempName,NodeNum", Order: "ASC", Condition: " and 1=1" }
            , limits: [50, 100, 200]
            , limit:50
            , cols: [[ //表头
                { field: 'NodeNum', title: '序号', width: 80, fixed: 'left' }
                , { field: 'NodeName', title: '节点名', width: 150, fixed: 'left' }
                , { field: 'Department', title: '部门', width: 150, fixed: 'left' }
                , { field: 'TempName', title: '模板名称', width: 150, fixed: 'left' }
                , {
                    field: 'ProStage', title: '阶段名称', width: 150,
                    templet: function (d) {
                        switch (d.ProStage) {
                            case 1:
                                return "项目前期";
                                break;
                            case 2:
                                return "前期测算";
                                break;
                            case 3:
                                return "项目实施";
                                break;
                            case 4:
                                return "竣工结算";
                                break;
                            case 5:
                                return "决算收款";
                                break;
                            default:
                                "ERROR";
                                break;
                        }
                    }
                }
                , {
                    field: "operation", title: "操作", width: 200,
                    templet: function (d) {
                        return '<a class="layui-btn layui-btn-xs" lay-event="detail">编辑</a>' +
                            '<a class="layui-btn layui-btn-xs" lay-event="TableDel">删除</a>';
                    }
                }
            ]]
        });

        table.on("tool(ProjectTableList)", function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent == 'detail') {
                layerindex = layer.open({
                    type: 1,
                    title: ['新增', 'font-size:18px;'],
                    area: ['1000px', '600px'],
                    content: $("#EditLayer"),  //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    success: function (layero, index) {
                        $("#EditFrom input[name='ProcTemplateId']").val(data.ProcTemplateId);
                        $("#EditFrom input[name='TempName']").val(data.TempName);
                        $("#EditFrom input[name='NodeName']").val(data.NodeName);
                        $("#EditFrom input[name='NodeNum']").val(data.NodeNum);
                        $("#EditFrom textarea[name='Content']").val(data.Content);
                        //$("#EditSelDepartment").find("option[value='" + data.Department + "']").attr("selected", true);
                        $("#EditSelDepartment").val(data.Department);
                        $("#EditSelProStage").val(data.ProStage);

                        form.render();
                    }
                });

            }

            if (layEvent == 'TableDel') {
                layer.confirm('<span class="layui-icon"></span>' + '是否真的要删除“' + data.NodeName + '？', {
                    btn: ['确定删除', '取消'] //可以无限个按钮
                    , btn1: function (index) {
                        //按钮【删除】的回调
                        $.ajax({
                            type: "POST",
                            url: "/Process/TemplateDel",
                            async: false,
                            data: { "ProcTemplateId": data.ProcTemplateId },
                            success: function (msg) {
                                if (msg.result == "OK") {
                                    layer.msg('删除成功"', { icon: 6, time: 1000 });
                                    table.reload("demo", {

                                    });
                                } else {
                                    alert("删除失败");
                                }
                            }
                        });
                        layer.close(index);
                    }
                    , btn2: function (index) {
                        //按钮【按钮三】的回调
                        //alert("2");
                    }
                });
            }

        });

    });


    //回车键
    function getKey() {
        if (event.keyCode == 13) {
            SearchFunc();
        }
    }

    function SearchFunc() {
        var text = $("#SearchText").val();
        if (text == "") {
            table.reload("demo", {
                where: {
                    SortName: "TempName,NodeNum", Order: "ASC", Condition: " and 1=1"
                },
                page: {
                    curr: 1
                }
            });
        }
        else {
            table.reload("demo", {
                where: {
                    SortName: "TempName,NodeNum", Order: "Desc", Condition: " and 1=1 and TempName like '%" + text + "%'"
                },
                page: {
                    curr: 1
                }
            });
        }
    }

</script>

